<template>
  <div class="timetable_hover">
    <el-popover placement="bottom-end" :open-delay="100" popper-class="timetable_popper_box" width="330" trigger="hover" :visible-arrow="false">
      <div class="gl_dis_ib gl_middle gl_ellipsis title gl_fs_16">{{ className }}</div>
      <span class="gl_dis_ib gl_middle type gl_fs_12 gl_pl_5">
        <template v-if="!isCreate">
          （{{ data.courseTeachingMode && data.courseTeachingMode.name }}）
        </template>
        <template v-else>
          <template v-for="item in dict.teachingMode">
            {{ item.code === (data.course && data.course.teachingModeCode) ? '（' + item.value + '）' : '' }}
          </template>
        </template>
      </span>
      <div class="text gl_mt_5">
        <span v-if="data.courseDate">{{ data.courseDate | FormatDate('yyyy-MM-dd') }}</span>
        <template v-if="!isCreate">
          <span>{{ '（' + weekList[week - 1] + '）' || '' }}</span>
          <span>{{ 10 > data.startHour ? '0' + data.startHour : data.startHour }}:{{ 10 > data.startMinute ? '0' + data.startMinute : data.startMinute }} - {{ 10> data.endHour ? '0' + data.endHour : data.endHour }}:{{ 10 > data.endMinute ? '0' + data.endMinute : data.endMinute }}</span>
        </template>
        <template v-else>
          <span>{{ '（' + week + '）' || '' }}</span>
          <span>{{ data.time || '' }}</span>
        </template>
      </div>
      <div class="text">课程：{{ !isCreate ? data.courseName : (data.course && data.course.name) }}</div>
      <template v-if="!isCreate">
        <div v-for="item in data.courseEmployees" :key="item.id">
          <div v-if="item.courseEmployeeTypeCode == 'Coach'" class="text">
            教练：{{ item.employee && item.employee.name }}
          </div>
        </div>
      </template>
      <div v-else class="text">教练：{{ data.coachObj && data.coachObj.name }}</div>
      <div class="text">教室：{{ !isCreate ? (data.classroomName || '- -') : ((data.classroom && data.classroom.name) || '- -') }}</div>
      <div v-if="!trialclass">
        <div v-if="!isOrderPage" class="gl_mt_15">
          <template v-if="!isCreate">
            <el-button size="mini" type="primary" @click="changeRoute(data, 'SignList')">签到</el-button>
            <el-button size="mini" type="primary" plain @click="changeRoute(data, 'ArrangingList')">详情</el-button>
          </template>
          <el-button size="mini" type="warning" @click="edit(data)">编辑</el-button>
          <el-button size="mini" type="danger" @click="remove(data)">删除</el-button>
        </div>
        <div v-else class="gl_mt_15">
          <el-button v-if="!data.isReserved" style="width: 100%" size="mini" :loading="buLoading" type="primary" @click="orderClass()">预 约 课 程</el-button>
          <el-button v-else style="width: 100%" size="mini" type="info" disabled>已 预 约</el-button>
        </div>
      </div>
      <div v-else>
        <el-button v-if="!data.isReserved" style="width: 100%" size="mini" :loading="buLoading" type="primary" @click="trialcourselist()">跟 班 试 课</el-button>
        <el-button v-else style="width: 100%" size="mini" type="info" disabled>已 试 课</el-button>
      </div>

      <div slot="reference">
        <slot name="content" />
      </div>
    </el-popover>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import {
  CreateReservationInput, // 创建预约
  CreateCustomerTrialCourseInput // 创建试课
} from '@/lib/form/hall/swaggerForm';
import {
  api_POST_ClubReservation, // 创建预约
  api_POST_ClubCustomerTrialCourse, // 创建试课
  api_PUT_ClubCustomerTrialCourseId
} from '@/extend/api/hallswaggerApi/app';
export default {
  props: {
    isOrderPage: { // 是否是预约页面
      type: Boolean,
      default: false
    },
    isCreate: { // 是否是排课
      type: Boolean,
      default: false
    },
    className: {
      type: String,
      default: ''
    },
    week: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    },
    delKey: { // 最里层的索引（删除时需要）
      type: Number,
      default: 0
    },
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      reservationAddMsg: new CreateReservationInput(),
      CreateCustomerTrialCourseInput: new CreateCustomerTrialCourseInput(),
      buLoading: false,
      trialclass: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
    if (this.$route.path.indexOf('/trialclass') > 0) {
      this.trialclass = true;
    }
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 签到 or 详情
    changeRoute(data, code) {
      const query = {
        name: code,
        id: data.classId
      };
      this.$router.push({
        name: 'ArrangingTypeList',
        query: query
      });
    },
    // 编辑
    edit(data) {
      data['delKey'] = this.delKey;
      if (this.isCreate) {
        const arr = [{
          prop: '1',
          label: '周一'
        },
        {
          prop: '2',
          label: '周二'
        },
        {
          prop: '3',
          label: '周三'
        },
        {
          prop: '4',
          label: '周四'
        },
        {
          prop: '5',
          label: '周五'
        },
        {
          prop: '6',
          label: '周六'
        },
        {
          prop: '7',
          label: '周日'
        }];
        const key = arr.findIndex(item => item.label === this.week);
        data.week = data.week ? data.week : arr[key].prop; // 拿到周几的key值
      }
      this.$emit('edit', data);
    },
    // 删除
    remove(data) {
      data['delKey'] = this.delKey;
      if (this.isCreate) {
        const arr = [{
          prop: '1',
          label: '周一'
        },
        {
          prop: '2',
          label: '周二'
        },
        {
          prop: '3',
          label: '周三'
        },
        {
          prop: '4',
          label: '周四'
        },
        {
          prop: '5',
          label: '周五'
        },
        {
          prop: '6',
          label: '周六'
        },
        {
          prop: '7',
          label: '周日'
        }];
        const key = arr.findIndex(item => item.label === this.week);
        data.week = data.week ? data.week : arr[key].prop; // 拿到周几的key值
      }
      this.$emit('remove', data);
    },
    // 预约(加入班级)
    orderClass() {
      const that = this;
      if (that.$route.query && that.$route.query.studentId) {
        this.buLoading = true;
        that.reservationAddMsg.registerStudentId = that.$route.query.studentId;
        that.reservationAddMsg.courseScheduleId = this.data.id;
        that.reservationAddMsg.reservationSourceCode = 'ManualInput';
        api_POST_ClubReservation(that.reservationAddMsg).then(res => {
          this.buLoading = false;
          that.$message({ type: 'success', message: '预约成功' });
          that.$router.push({
            name: 'AppointmentManagement',
            query: { random: Math.floor(Math.random() * 1000000) }
          });
        }, error => {
          this.buLoading = false;
          const _msg = error.error.message || error.message;
          that.$message({ type: 'error', message: _msg });
        });
      } else {
        that.$message({ type: 'warning', message: '请先选择学员' });
      }
    },
    trialcourselist() {
      if (!this.$route.query.edit) {
        this.buLoading = true;
        this.CreateCustomerTrialCourseInput.customerId = this.$route.query.studentId;
        this.CreateCustomerTrialCourseInput.courseScheduleId = this.data.id;
        api_POST_ClubCustomerTrialCourse(this.CreateCustomerTrialCourseInput).then(res => {
          this.buLoading = false;
          this.$message({ type: 'success', message: '试课成功' });
          this.$router.go(-1);
        }, error => {
          this.buLoading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      } else {
        this.buLoading = true;
        this.CreateCustomerTrialCourseInput.customerId = this.$route.query.studentId;
        this.CreateCustomerTrialCourseInput.courseScheduleId = this.data.id;
        api_PUT_ClubCustomerTrialCourseId(this.$route.query.id, this.CreateCustomerTrialCourseInput).then(res => {
          this.buLoading = false;
          this.$message({ type: 'success', message: '重约成功' });
          this.$router.go(-1);
        }, error => {
          this.buLoading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      }
    }
  }
};
</script>

<style>
.timetable_popper_box {
  background: #ffffff;
  border: 1px solid #000000;
  padding: 10px 15px;
  border-radius: 4px;
}
</style>

<style scoped>
.title {
  width: 230px;
  color: #000000;
  line-height: 16px;
  font-weight: 500;
}
.type {
  color: #1990ff;
  line-height: 16px;
}
.timetable_hover .text {
  font-size: 12px;
  line-height: 16px;
  color: #000000;
}
</style>
